<%@ Page Language="C#" MasterPageFile="~/Site.master" Title="GridView with ACT FilteredTextBox and  NumericUpDown" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" Runat="Server">
    <asp:ScriptManagerProxy ID="TheScriptManager" runat="server">
        <Scripts>
            <asp:ScriptReference Path="~/Act/Scripts/Common.js" />
            <asp:ScriptReference Path="~/Act/Scripts/BaseScripts.js" />
            <asp:ScriptReference Path="~/Act/Scripts/Timer.js" />
            <asp:ScriptReference Path="~/Act/Scripts/NumericUpDownBehavior.js" />
            <asp:ScriptReference Path="~/Act/Scripts/FilteredTextBoxBehavior.js" />
        </Scripts>
    </asp:ScriptManagerProxy>
    <h3>ACT FilteredTextBox and  NumericUpDown</h3>
    <table>
        <tr>
            <td style="text-align:left">
                <AjaxData:GridView ID="GridView1" runat="server" 
                    CssClass="DataWebControlStyle" CellSpacing="0" CellPadding="3" DataKeyName="ID" SortColumn="Name" 
                    SortOrderAscendingImageUrl="~/Images/up.gif" SortOrderDescendingImageUrl="~/Images/dn.gif" SortCommandEvent="onSortCommand" 
                    RowCreatedEvent="onRowCreated" RowDataBoundEvent="onRowDataBound" EditCommandEvent="onEditCommand" UpdateCommandEvent="onUpdateCommand" 
                    CancelCommandEvent="onCancelCommand">
                   <AlternatingRowStyle CssClass="AlternatingRowStyle" />
                   <RowStyle CssClass="RowStyle"/>
                   <HeaderStyle CssClass="HeaderStyle"/>
                   <Columns>
                        <AjaxData:GridViewCommandColumn ShowEditButton="true" ShowDeleteButton="false" HeaderStyle-Wrap="false" ItemStyle-Wrap="false"/>
                        <AjaxData:GridViewTemplateColumn HeaderText="Product" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left" HeaderStyle-Wrap="false" ItemStyle-Wrap="false">
                            <ItemTemplate>
                                <span id="spnName"></span>
                            </ItemTemplate>
                        </AjaxData:GridViewTemplateColumn>
                        <AjaxData:GridViewTemplateColumn HeaderText="Quantity Per Unit" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left" HeaderStyle-Wrap="false" ItemStyle-Wrap="false">
                            <ItemTemplate>
                                <span id="spnQuantityPerUnit"></span>
                            </ItemTemplate>
                            <EditItemTemplate>
                                <input type="text" id="txtQuantityPerUnit" />
                            </EditItemTemplate>
                        </AjaxData:GridViewTemplateColumn>
                        <AjaxData:GridViewTemplateColumn HeaderText="Unit Price" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="right" HeaderStyle-Wrap="false" ItemStyle-Wrap="false">
                            <ItemTemplate>
                                <span id="spnUnitPrice"></span>
                            </ItemTemplate>
                            <EditItemTemplate>
                                <input type="text" id="txtUnitPrice" style="width:60px" />
                            </EditItemTemplate>
                        </AjaxData:GridViewTemplateColumn>
                        <AjaxData:GridViewTemplateColumn HeaderText="Units In Stock" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="right" HeaderStyle-Wrap="false" ItemStyle-Wrap="false">
                            <ItemTemplate>
                                <span id="spnUnitsInStock"></span>
                            </ItemTemplate>
                            <EditItemTemplate>
                                <table cellpadding="1" cellspacing="0">
                                    <tbody>
                                        <tr>
                                            <td style="text-align:right">
                                                <input type="text" id="txtUnitsInStock" style="width:30px;text-align:center" />
                                            </td>
                                            <td style="text-align:left">
                                                <div><img id="imgUp" src="Images/up.png" alt="" style="cursor:pointer" onmouseover="this.src='Images/uph.png'" onmouseout="this.src='Images/up.png'"/></div>
                                                <div><img id="imgDn" src="Images/dn.png" alt="" style="cursor:pointer" onmouseover="this.src='Images/dnh.png'" onmouseout="this.src='Images/dn.png'"/></div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </EditItemTemplate>
                        </AjaxData:GridViewTemplateColumn>
                        <AjaxData:GridViewTemplateColumn HeaderText="Units On Order" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="right" HeaderStyle-Wrap="false" ItemStyle-Wrap="false">
                            <ItemTemplate>
                                <span id="spnUnitsOnOrder"></span>
                            </ItemTemplate>
                            <EditItemTemplate>
                                <input type="text" id="txtUnitsOnOrder" style="width:30px" />
                            </EditItemTemplate>
                        </AjaxData:GridViewTemplateColumn>
                   </Columns>
                </AjaxData:GridView>
            </td>
        </tr>
        <tr>
            <td style="text-align:right">
                <AjaxData:Pager ID="Pager1" runat="server" CssClass="PagerRowStyle" CurrentPageStyle-CssClass="PagerCurrentPage" OtherPageStyle-CssClass="PagerOtherPage" PageChangedEvent="pageChanged"></AjaxData:Pager>
            </td>
        </tr>
    </table>
    <script type="text/javascript">

        var _gridView;
        var _pager;

        var _products;

        function pageLoad(sender, e)
        {
            _gridView = GridView1;
            _pager = Pager1;
            loadProducts();
        }

        function loadProducts()
        {
            //Need to convert the sortoder so our WS understand
            var sortColumn = _gridView.get_sortColumn();
            var sortOrder = (_gridView.get_sortOrder() == AjaxDataControls.GridViewSortOrder.Descending) ? 'DESC' : 'ASC';
            var startIndex = (_pager.get_pageIndex() * _pager.get_pageSize());

            DataService.GetProductList(startIndex, _pager.get_pageSize(), sortColumn, sortOrder, onLoadSuccess);
        }

        function onLoadSuccess(result)
        {
            _products = result.Rows;
            _pager.set_recordCount(result.Total);
            bindProducts();
        }

        function bindProducts()
        {
            _gridView.set_dataSource(_products);
            _gridView.dataBind();
        }

        function onSortCommand(sender, e)
        {
            _gridView.set_sortColumn(e.get_sortColumn())
            _gridView.set_sortOrder(e.get_sortOrder());
            _pager.set_pageIndex(0); // need to reset the current page as sorting is changed
            _gridView.set_editIndex(-1);
            loadProducts();
        }

        function onRowCreated(sender, e)
        {
            var row = e.get_row();

            if (row.get_rowType() == AjaxDataControls.GridViewRowType.EditRow)
            {
                //Now we are in Edit mode, lets attach the Extenders.

                var txtQuantityPerUnit = row.findControl('txtQuantityPerUnit');
                var txtUnitPrice = row.findControl('txtUnitPrice');
                var txtUnitsInStock = row.findControl('txtUnitsInStock');
                var txtUnitsOnOrder = row.findControl('txtUnitsOnOrder');

                var filteredUnitPriceTextboxExtenderID = txtUnitPrice.id + 'FilteredUnitPriceTextboxExtender';
                var filteredUnitPriceTextboxExtender = $find(filteredUnitPriceTextboxExtenderID);

                if (filteredUnitPriceTextboxExtender)
                {
                    //There is a previous instance so we need to remove it.
                    Sys.Application.removeComponent(filteredUnitPriceTextboxExtender);
                }
                
                var filteredUnitsOnOrderTextboxExtenderID = txtUnitsOnOrder.id + 'FilteredUnitsOnOrderTextboxExtender';
                var filteredUnitsOnOrderTextboxExtender = $find(filteredUnitsOnOrderTextboxExtenderID);

                if (filteredUnitsOnOrderTextboxExtender)
                {
                    Sys.Application.removeComponent(filteredUnitsOnOrderTextboxExtender);
                }

                var numericUpDownExtenderID = txtUnitsInStock.id + 'NumericUpDownExtender';
                var numericUpDownExtender = $find(numericUpDownExtenderID);

                if (numericUpDownExtender)
                {
                    Sys.Application.removeComponent(numericUpDownExtender);
                }

                var imgUp = row.findControl('imgUp');
                var imgDn = row.findControl('imgDn');

                //Now create the extender in the client Side. 'FilterType':3 means Only math symbols (.) and numbers allowed.'FilterType':2 means only numbers allowed.
                $create(AjaxControlToolkit.FilteredTextBoxBehavior, {'FilterType':3,'ValidChars':'.','id':filteredUnitPriceTextboxExtenderID}, null, null, txtUnitPrice);
                $create(AjaxControlToolkit.FilteredTextBoxBehavior, {'FilterType':2,'id':filteredUnitsOnOrderTextboxExtenderID}, null, null, txtUnitsOnOrder);
                $create(AjaxControlToolkit.NumericUpDownBehavior, {'Minimum':0,'TargetButtonDownID':imgDn.id,'TargetButtonUpID':imgUp.id,'id':numericUpDownExtenderID}, null, null, txtUnitsInStock);
            }
        }

        function onRowDataBound(sender, e)
        {
            var row = e.get_row();

            if (row.get_isDataRowType())
            {
                var product = row.get_dataItem();

                setText(row.findControl('spnName'), product.Name);

                if (row.get_rowType() == AjaxDataControls.GridViewRowType.EditRow)
                {
                    var txtQuantityPerUnit = row.findControl('txtQuantityPerUnit');
                    txtQuantityPerUnit.value = product.QuantityPerUnit;

                    var txtUnitPrice = row.findControl('txtUnitPrice');
                    txtUnitPrice.value = product.UnitPrice;
                    
                    var txtUnitsInStock = row.findControl('txtUnitsInStock');
                    txtUnitsInStock.value = product.UnitsInStock;

                    var txtUnitsOnOrder = row.findControl('txtUnitsOnOrder');
                    txtUnitsOnOrder.value = product.UnitsOnOrder;
                }
                else
                {
                    setText(row.findControl('spnQuantityPerUnit'), product.QuantityPerUnit);
                    setText(row.findControl('spnUnitPrice'), product.UnitPrice);
                    setText(row.findControl('spnUnitsInStock'), product.UnitsInStock);
                    setText(row.findControl('spnUnitsOnOrder'), product.UnitsOnOrder);
                }
            }
        }

        function onEditCommand(sender, e)
        {
            
            _gridView.set_editIndex(e.get_row().get_rowIndex());
        }

        function onUpdateCommand(sender, e)
        {
        
            var row = e.get_row();
            var productId = _gridView.get_dataKeys()[e.get_row().get_rowIndex()];

            var txtQuantityPerUnit = row.findControl('txtQuantityPerUnit');
            var txtUnitPrice = row.findControl('txtUnitPrice');
            var txtUnitsInStock = row.findControl('txtUnitsInStock');
            var txtUnitsOnOrder = row.findControl('txtUnitsOnOrder');

            var product = e.get_row().get_dataItem();

            product.QuantityPerUnit = txtQuantityPerUnit.value.trim();
            product.UnitPrice = txtUnitPrice.value.trim();
            product.UnitsInStock = txtUnitsInStock.value.trim();
            product.UnitsOnOrder = txtUnitsOnOrder.value.trim();

            DataService.UpdateProductInventory(
                                        productId,
                                        product.QuantityPerUnit,
                                        product.UnitPrice,
                                        product.UnitsInStock,
                                        product.UnitsOnOrder,
                                        function(result)
                                        {
                                            if (result == true)
                                            {
                                                _gridView.set_editIndex(-1);
                                            }
                                        }
                                      );
        }

        function onCancelCommand(sender, e)
        {
            _gridView.set_editIndex(-1);
        }

        function pageChanged(sender, e)
        {
            _pager.set_pageIndex(e.get_newPageIndex());
            _gridView.set_editIndex(-1);
            loadProducts();
        }

        function setText(element, text)
        {
            if (typeof element.textContent != 'undefined')
            {
                element.textContent = text;
            }
            else if (typeof element.innerText != 'undefined')
            {
                element.innerText = text;
            }
        }

    </script>
</asp:Content>